<template>
  <div class="card-box flex flex-wrap justify-between">
    <a-card class="card-item" :body-style="{ padding: 0 }" hoverable>
      <div class="item-header">
        <a-avatar class="ml-2" :src="avatarMan" />
        <div class="flex-1 ml-2 flex justify-between items-center">
          <div class="text-lg">{{ formState?.brName || '姓名' }}</div>
          <div>{{ formState?.brXb || '性别' }}</div>
          <div>{{ formState?.brAge || '年龄' }}</div>
          <a-divider v-if="showBrId" type="vertical" class="!border-white" />
          <div>{{ formState?.brMob || '手机号' }}</div>
          <div class="min-w-[80px]">
            <span v-if="showBrId">{{ formState?.brId || '编号' }}</span>
          </div>
        </div>
      </div>
      <slot></slot>
    </a-card>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import avatarMan from '@/assets/images/avatar-man.png'

const props = defineProps({
  userData: {
    type: Object,
    default: () => ({})
  },
  showBrId: {
    type: Boolean,
    default: true
  }
})
const formState = ref()
watch(
  () => props.userData,
  (value) => {
    if (value) {
      if (props.userData?.brName) {
        formState.value = { ...props.userData }
      } else {
        formState.value = {}
      }
    }
  },
  {
    immediate: true
  }
)
</script>
<style lang="less" scoped>
.card-box {
  overflow: hidden auto;
  .card-item {
    width: 100%;
    height: fit-content;
    border: 1px solid var(--primary-color) !important;

    .item-header {
      position: relative;
      display: flex;
      padding: 8px;
      color: #fff;
      background-color: var(--primary-color);
      border-top-left-radius: 2px;
      border-top-right-radius: 2px;
    }
  }
}
</style>
